<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #000;
        }

        .a {
            width: 200px;
            height: 200px;
            background-color: #f00123;

            /* background: rgb(); */
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="a"></div>
    </div>


    <script>

        // 鼠标事件
        //   click  左键单击
        //   dblclick   双击
        //   mouseup   mousedown  鼠标抬起  鼠标按下
        //   mouseover   mouseout  鼠标移入移出      ！！！！！！！！！！！！！！！
        //   mouseenter   mouseleave   鼠标移入移出  --- 支持事件捕获
        //   mousemove  鼠标移动

        document.ondblclick = function (e) {
            console.log('双击');
        }


        // 鼠标按下   
        //   左键  0
        //   滚轮  1
        //   右键  2
        // document.onmousedown = function (e) {
        //     console.log(e.button);
        // }

        // 鼠标抬起  
        //   左键  0
        //   滚轮  1
        //   右键  2
        document.onmouseup = function (e) {
            console.log(e.button);
        }



        // var oBox = document.querySelector('.box');
        // oBox.onmouseover = function () {
        //     console.log('over box');
        //     this.style.background = 'green'
        // }
        // oBox.onmouseout = function () {
        //     console.log('out box');
        //     this.style.background = 'black'
        // }

        // var oA = document.querySelector('.a');
        // oA.onmouseover = function () {
        //     console.log('over oa');
        //     // this.style.background = 'green'
        // }
        // oA.onmouseout = function () {
        //     console.log('out oa');
        //     // this.style.background = 'black'
        // }


        var oBox = document.querySelector('.box');
        oBox.onmouseenter = function () {
            console.log('enter box');
            this.style.background = 'green'
        }
        oBox.onmouseleave = function () {
            console.log('leave box');
            this.style.background = 'black'
        }

        var oA = document.querySelector('.a');
        oA.onmouseenter = function () {
            console.log('enter oa');
            // this.style.background = 'green'
        }
        oA.onmouseleave = function () {
            console.log('leave oa');
            // this.style.background = 'black'
        }



        document.body.onmousemove = function () {
            // console.log(333);
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            this.style.background = `rgb(${r},${g},${b})`
        }


        // 封装随机颜色
        //   rgb
        //   #abc123


    </script>

</body>

</html>